<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>首页 - 图书管理系统</title>
    <link rel="icon" href="favicon.ico" th:href="@{../favicon.ico}" type="image/ico">
    <meta name="keywords" content="图书管理系统">
    <meta name="description" content="图书管理系统">
    <meta name="author" content="Superb">
    <link href="../css/bootstrap.min.css" th:href="@{../css/bootstrap.min.css}" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css"  th:href="@{../css/materialdesignicons.min.css}" rel="stylesheet">
    <link href="../css/style.min.css" th:href="@{../css/style.min.css}" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a th:href="@{/home}"><img src="../images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <div th:replace="~{common/sidebar-main::sidebar-main}"></div>

                <div class="sidebar-footer">
                    <p class="copyright">李杰 &copy; 2022.图书管理系统</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 借阅记录 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="../images/users/avatar.jpg" alt=""/>
                                <span th:text="${session.username}"> <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a></li>
                                <li><a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a>
                                </li>
                                <li><a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li><a th:href="@{/layout}"><i class="mdi mdi-logout-variant"></i> 退出登录</a></li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="modal fade" id="empModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" id="form">

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">借阅人名称</label>
                                    <label class="col-sm-3 control-label" id="borrowerName"></label>
                                </div>
                                <input type="hidden" name="id" class="form-control" id="id">
                                <input type="hidden" name="realDate" class="form-control" id="real">
                                <input type="hidden" name="bookId" class="form-control" id="bookId">

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">手机号</label>
                                    <label class="col-sm-3 control-label" id="borrowerPhone"></label>
                                </div>


                                <div class="form-group">
                                    <label class="col-sm-3 control-label">借阅时间</label>
                                    <label class="col-sm-3 control-label" id="beginDate"></label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">计划还书时间</label>
                                    <label class="col-sm-3 control-label" id="endDate"></label>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">实际还书时间</label>
                                    <label class="col-sm-3 control-label" id="realDate"></label>
                                </div>
                                <div class="form-group">
                                    <label for="latefee" class="col-sm-3 control-label">滞纳金</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="latefee" class="form-control" id="latefee"
                                               placeholder="滞纳金">
                                        <span class="help-block"></span>
                                    </div>
                                </div>


                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" id="save_btn" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="container">

                <div class="row">
                </div>
                <!--        表格-->
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>图书名称</th>
                                <th>图书类别</th>
                                <th>借阅人名称</th>
                                <th>联系方式</th>
                                <th>借阅时间</th>
                                <th>计划还书时间</th>
                                <th>实际还书时间</th>
                                <th>滞纳金</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="borrow:${borrows}">
                                <td th:text="${borrow.book_name}"></td>
                                <td th:text="${borrow.type_name}"></td>
                                <td th:text="${borrow.borrower_name}"></td>
                                <td th:text="${borrow.borrower_phone}"></td>
                                <td th:text="${borrow.begin_date}"></td>
                                <td th:text="${borrow.end_date}"></td>
                                <td th:if="${borrow.real_date!='0'}"
                                    th:text="${borrow.real_date}"></td>
                                <td th:if="${borrow.real_date=='0'}"></td>
                                <td th:text="${borrow.latefee}"></td>
                                <td th:if="${borrow.real_date=='0'}">
                                    <button th:id="update_btn" th:emp_id="${borrow.id}" th:latefee="${borrow.latefee}"
                                            class="btn btn-info btn-sm">还书
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--        尾部-->
                <div class="row"></div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" th:src="@{../js/jquery.min.js}" src="js/jquery.min.js"></script>
<script type="text/javascript" th:src="@{../js/bootstrap.min.js}" src="js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{../js/perfect-scrollbar.min.js}" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" th:src="@{../js/main.min.js}" src="js/main.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript">

    //数据校验
    function validate_add_form() {
        var latefee = $("#latefee").val();
        var late = /^[0-9]{1,6}$/
        if (latefee == null || latefee == "") {
            show_validate_msg("#latefee", "error", "不能为空");
            return false;
        } else if (!late.test(latefee)) {
            show_validate_msg("#latefee", "error", "必须为正整数");
            return false;
        } else {
            show_validate_msg("#latefee", "success", "输入合法");
        }
        return true;
    }


    //显示校验的验证信息
    function show_validate_msg(ele, status, msg) {
        //清除原先格式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }


    //还书
    $(document).on("click", "#update_btn", function () {
        //查询emp_id
        var emp_id = $(this).attr("emp_id");
        //查询滞纳金
        var latefee = $(this).attr("latefee");

        //清空表单样式
        reset_form("#form");
        $("#myModalLabel").text("还书");
        //填充借阅记录
        getEmp(emp_id);
        //赋值模态框滞纳金
        $("#latefee").val(latefee);
        //弹出模态框
        $("#empModal").modal({
            backdrop: "static"
        });
    });


    //清空表单样式
    function reset_form(ele) {
        //清空内容
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-success has-error");
        $(ele).find(".help-block").text("");
    }

    //查询借阅记录
    function getEmp(id) {
        $.ajax({
            url: "/book/borrow/get",
            type: "GET",
            data: "id=" + id,
            success: function (result) {
                var item = result.data;
                var id = item.id;
                var bookId = item.bookId;
                var borrowerName = item.borrowerName;
                var borrowerPhone = item.borrowerPhone;
                var beginDate = item.beginDate;
                var endDate = item.endDate;
                var realDate = item.realDate;

                //传后台
                $("#id").val(id);
                $("#real").val(realDate);
                $("#bookId").val(bookId);
                //仅展示
                $("#borrowerName").text(borrowerName);
                $("#borrowerPhone").text(borrowerPhone);
                $("#beginDate").text(beginDate);
                $("#endDate").text(endDate);
                $("#realDate").text(realDate);
            }
        });
    }

    //保存
    $("#save_btn").click(function () {
        if (!validate_add_form()) {
            return false;
        }
        $.ajax({
            url: "/book/borrow/put/",
            type: "PUT",
            data: $("#form").serialize(),
            success: function (result) {
                alert(result.msg);
                //关闭
                $("#empModal").modal('hide');
            }
        });
        //移除emp_id属性
        $(this).removeAttr("emp_id");

        location.reload();
    });
</script>
</body>
</html>
